<!doctype html>
<html>
<head>
#parse("vm/common/header.html")

<script>

var type_chart = "bar"; // "column";


$(document).ready(function () {
    $("#ketqua_container").hide();
    //---------init--------------
    //lay danh sach hoc ky

    //---------------------------
    

});

function report() {
    //hide
    $("#ketqua_container").hide();

    //lay du lieu tu server
    getData();
}

function getData() {
    //call server to get data
    var rqdata = {hocKy : jQuery("#hocKy").val() , khoa:  jQuery("#khoa").val() };
    jQuery.ajax({
        type: "POST",
        url: "dkmhdiemdata.action?hocKy=" + jQuery("#hocKy").val()
        					+"&khoa=" + jQuery("#khoa").val() ,
        data: {} ,//rqdata,
        contentType: "application/json; charset=utf-8",
        dataType: "json", //dung cai nay thi response phai dung json format, neu khong thi error parseerror
        success: function (response) {
	        var data = response;
	        //process data 

	        if(data.length>0){
	        	//view data
	        	viewData(data);
	        }else{
	        	alert("NODATA");
	        }
    	},error: function (xhr, status, error) {
    		alert('ERROR');
            var err = eval("(" + xhr.responseText + ")");
            console.log(err.Message);
        }
    });
}

function viewData(data) {
    var datainfo = createTable(data);
	
  	//---show------
    $("#ketqua_container").show();
  	
  	
    //---draw-chart---
    drawChart(datainfo);
}

function createTable(data) {
	var categories = [];
	var data0_3 = [];
	var data3_5 = [];
	var data5_7 = [];
	var data7_9 = [];
	var data9_10 = [];
	var data_o = [];
	//----------------------
    //create tbl
    var tblid = "table_container";
    
    var html = '<table id="' + tblid + '" class="table">';
    html+= ' <thead>';
    html+= '    <tr>';
    html+= '      <th>STT</th>';
    html+= '      <th>Môn học</th>';
    html+= '       <th>0-3</th>';
    html+= '       <th>3-5</th>';
    html+= '       <th>5-7</th>';
    html+= '       <th>7-9</th>';
    html+= '       <th>9-10</th>';
    html+= '       <th>other</th>';
    html+= '    </tr>';
    html+= '  </thead>';
    html+= '  <tbody>';
    
    for(var i = 0 ; i < data.length; i++){
    	var it = data[i];
	    html+= '    <tr>';
	    html+= '      <td>' +(i+1) + '</td>';
	    html+= '      <td>' + it.MA_MH +' - ' + it.TEN_MH + '</td>';
	    html+= '      <td>' + parseInt( it.range1) + '</td>';
	    html+= '      <td>' + parseInt( it.range2) + '</td>';
	    html+= '      <td>' + parseInt( it.range3) + '</td>';
	    html+= '      <td>' + parseInt( it.range4) + '</td>';
	    html+= '      <td>' + parseInt( it.range5) + '</td>';
	    html+= '      <td>' + parseInt( it.other) + '</td>';
	    html+= '    </tr>';
	    categories.push( it.MA_MH +' - ' + it.TEN_MH );
	    //----
	    data0_3.push( parseInt( it.range1) );
	    data3_5.push( parseInt( it.range2) );
	    data5_7.push( parseInt( it.range3) );
	    data7_9.push( parseInt( it.range4) );
	    data9_10.push( parseInt( it.range5) );
	    data_o.push( parseInt( it.other) );
	}
 
    html+= '  </tbody>';
    html+= '</table>';

    $("#data_container").html(html);
    
    //markup table
    //markup_table();
    
    return {c : categories, d : [data0_3,data3_5,data5_7,data7_9,data9_10,data_o]}
}

var curr_options = null;
function drawChart(datainfo) {
	var series_data = [{
	    name: '0-3', 
		data : datainfo.d[0],
		index:5
	},
	{
	    name: '3-5', 
		data : datainfo.d[1],
		index:4
	},
	{
	    name: '5-7', 
		data : datainfo.d[2],
		index:3
	},
	{
	    name: '7-9', 
		data : datainfo.d[3],
		index:2
	},
	{
	    name: '9-10', 
		data : datainfo.d[4],
		index:1
	},
	{
	    name: 'other', 
		data : datainfo.d[5],
		index:0
	}
	];
	//var categories_data = ['Toán 1', 'Kỹ thuật lập trình', 'Mạng máy tính', 'Trình biên dịch', 'Khai phá dữ liệu'];
	var categories_data = datainfo.c;
	
	curr_options = {
	        chart: {
	            type: type_chart,
	            height: categories_data.length * 60 + 120 
	        },
	        title: {
	            text: '$pagename'
	        },
	        subtitle: {
	            text: jQuery("#khoa :selected").text() + " - Học kỳ : " + jQuery("#hocKy :selected").text()
	        },
	        xAxis: {
	            categories: categories_data,
	            title: {
	                text: null
	            }
	        },
	        yAxis: {
	            min: 0,
	            title: {
	                text: 'Số SV',
	                align: 'high'
	            },
	            labels: {
	                overflow: 'justify'
	            }
	        },
	        tooltip: {
	            valueSuffix: '' //don vi 
	        },
	        plotOptions: {
	            bar: {
	                dataLabels: {
	                    enabled: true
	                }
	            },
	            series: {
	                stacking: null
	            }
	        },
	        legend: {
	           
	        },
	        credits: {
	            enabled: false
	        },
	        series: series_data
	    };
    $('#chart_container').highcharts(curr_options);
}
function changeTypeChart(el){
	if(curr_options!=null){
		var typechart = $(el).val();
		if(typechart=="stack"){
			curr_options.plotOptions.series.stacking = "percent";
		}else{
			
			curr_options.plotOptions.series.stacking = null;
		}
		
		curr_options.chart.renderTo = 'container';
		$('#chart_container').highcharts(curr_options);
		
	}
}
function export_excel() {
	var filename = "bc-dkmh-2-hk"+ jQuery("#hocKy").val() 
		+ "-" + jQuery("#khoa").val()
		+ ".xls"; 
    tableToExcel('table_container', 'baocao', filename);
}

function markup_table(){
	$('#table_container').bind('dynatable:preinit', function (e, dynatable) {
        dynatable.utility.textTransform.myNewStyle = function (text) {
            return text
             .replace(/\s+/, '_')
             .replace(/[A-Z]/, function ($1) { return $1 + $1 });
        };
    }).dynatable({
        table: {
            defaultColumnIdStyle: 'myNewStyle'
        },
        features: {
            paginate: false,
            search: false,
            recordCount: false,
            perPageSelect: false
        }
    });
}

</script>

</head>
<body>
<!-- tab menu -->
#parse("vm/common/top.html") 

<!-- title page -->
#parse("vm/common/title.html")
<!-- Content ---->
<div class="content_wapper padding">
<div class="container">
<div class="row">

<!-- left menu -->
#parse("vm/common/left-menu.html")

<!-- right content -->
#parse("vm/common/small-title.html")

<div class="sinhvien_wapper" style="">   
    <!--table-->
    <div>
    <!--filter-->
    <div class="row padding_notop" style="border-bottom: 1px solid #FFFFFF;">
    <div class="hocky-filter col-md-3" >
        <label>Học kỳ</label>
    	<select id="hocKy" class="form-control" name="hocKy">
          <option value="20142">HK2 2014-2015</option>
          <option value="20141">HK1 2014-2015</option>
          
          <option value="20133">HK3 2013-2014</option>
          <option value="20132">HK2 2013-2014</option>
          <option value="20131">HK1 2013-2014</option>
          
          <option value="20123">HK3 2012-2013</option>
          <option value="20122">HK2 2012-2013</option>
          <option value="20121">HK1 2012-2013</option>
          
          <option value="20113">HK3 2011-2012</option>
          <option value="20112">HK2 2011-2012</option>
          <option value="20111">HK1 2011-2012</option>
        </select>
    </div>
    <div class="col-md-1"></div>
    <div class="khoa-filter col-md-4" >
        <label >Khoa</label>
    	<select id="khoa" class="form-control" name="khoa">
        #foreach($t in $listKhoa) 
			<option value="$t.ma">$t.ma - $t.ten</option>
		#end
        </select>
    </div>
    <div class="col-md-3" style="margin-left: 20px;padding-top: 25px;">
        <div class="button" style="width: 120px;" onclick="report()" >Báo cáo</div>
    </div>
    </div>

    <!-------------ketqua-------------->
    <div id="ketqua_container" style="margin-top:10px">

    <!--dulieu-->
    <div >
        <label>Dữ liệu</label>
        <div style="float:right">
            <ul>
                <li>
                    <a style="border-width: 1px;border-color: black;border-style: solid;padding: 2px;" 
                        onclick="export_excel()" href="#">EXCEL</a>
                    <a id="dlink"  style="display:none;"></a>
                </li>
            </ul>
        </div>
    </div>
    
    <div id="data_container">
    </div>
    
    <!--chart-->
    <div>
    <div>
        <label>Biểu đồ</label>
        <div class="hocky-filter col-md-2" style="float:right">
        
    	<select class="form-control" onchange="changeTypeChart(this)" >
          <option value="bars">Số lượng</option>
          <option value="stack">Phần trăm</option>
        </select>
    	</div>
    </div>
    <div id="chart_container"></div>
    </div>

    </div>
</div>

</div>


</div>
</div>
</div>
<!-- end Content ---->

<!-- Footer ---->
#parse("vm/common/footer.html")
</body>
</html>